<template>
	<view class="sku" @click="onClose">
		<view class="productBox" @tap.stop="{}">
			<view class="product-delcom">
				<view v-if="spec_index > -1 && spec_data[spec_index] && spec_data[spec_index].attr">
					<text class="attr">{{attrText}}</text>
					<text class="price">￥{{spec_data[spec_index].price}}</text>
					<text class="oldprice">￥{{spec_data[spec_index].oldprice}}</text>
					<text class="stock">库存:{{spec_data[spec_index].stock}}</text>
				</view>
				<text v-else class="attr">请选择规格</text>
			</view>
			<view class="product-delcom" v-for="(sItem,sindex) in spec" :key="sindex">
				<view class="product-name">{{sItem.name}}</view>
				<view class="product-footerlist clearfix">
					<view v-for="(vItem,vindex) in sItem.values" :key="vindex" @click="chooseItem(sindex,vindex)"
					 v-bind:class="checked[sindex] == vindex?'productActive':''">{{vItem}}</view>
				</view>
			</view>
			<view class="product-delcom">
				<button style="margin: 20rpx;" type="primary" @click="onConfirm" :disabled="isDisabled">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			spec : {
				type : Array,
				default : []
			},
			spec_data : {
				type : Array,
				default : []
			}
		},
		data() {
			return {
				isDisabled : true,
				checked : [],
				spec_index : -1
			}
		},
		computed :{
			attrText(){
				if(this.spec_index > -1 && this.spec_data[this.spec_index] && this.spec_data[this.spec_index].attr){
					return this.spec_data[this.spec_index].attr.join()
				}else{
					return ''
				}
			}
		},
		methods: {
			chooseItem(sindex,vindex){
				this.$set(this.checked,sindex,vindex)
				if(this.checked.length == this.spec.length){
					this.isDisabled = false
					let attr = []
					this.checked.forEach((v,k)=>{
						attr.push(this.spec[k].values[v])
					})
					this.spec_data.forEach((v,k)=>{
						if(v.attr.join() == attr.join()){
							this.spec_index = k
						}
					})
				}
			},
			onClose(){
				this.$emit('close')
			},
			onConfirm(){
				this.$emit('confirm',this.spec_index)
			}
		}
	}
</script>

<style lang='scss'>
	.sku{
		z-index: 198;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
	}
	.productBox {
		z-index: 199;
		width: 100%;
		background-color: #fff;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.product-delcom {
		color: #323232;
		font-size: 26rpx;
		border-bottom: 1rpx solid #EEEEEE;
		.attr{
			color: #45b984;
			font-size: 32rpx;
			margin: 0 10rpx;
		}
		.price{
			color: #ff5500;
			font-size: 36rpx;
			margin: 0 10rpx;
		}
		.oldprice{
			color: #909399;
			font-size: 22rpx;
			text-decoration:line-through;
			margin: 0 10rpx;
		}
		.stock{
			color: #7c7f84;
			font-size: 24rpx;
			margin: 0 10rpx;
		}
	}

	.product-delcom .product-name {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.product-footerlist {
		margin-top: 1rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.product-footerlist view {
		border: 1rpx solid #606060;
		border-radius: 8rpx;
		color: #606060;
		text-align: center;
		padding: 4rpx 16rpx;
		margin-right: 16rpx;
		min-width: 96rpx;
		margin-bottom: 16rpx;
	}

	.product-footerlist .productActive {
		background-color: #1A1A29;
		color: #fff;
		border: 1rpx solid #1A1A29;
	}

	.product-footerlist .noneActive {
		background-color: #ccc;
		opacity: 0.4;
		color: #000;
		pointer-events: none;
	}
</style>
